import React, { Component } from "react";
import "./Choose.less";
import GoBack from "../../components/GoBack/GoBack";
import { ChoosePageApi } from "@/request/api"
import { showYTKAlert, alertDispatchFn } from "@/utils"
import { connect } from "react-redux";

class Choose extends Component {
  state = {

    // all  全部, err   错误, done 已做, notdone 没做
    testType: "all",
    chooSeArr: [
      { key: "all", en: "全部" },
      { key: "err", en: "错误" },
      { key: "done", en: "已做" },
      { key: "notdone", en: "没做" }
    ],
    // 控制试题分类样式
    chooSeNum: "all",
    // 做题数量
    chooSeArrNum: [5, 10, 20, 30, 50, 100],
    // 控制做题数量样式
    chOoSeNum: 0,
    // 题目类型
    timuArr: [],
    // 控制题目样式
    timuNum: 0
  }
  async componentDidMount() {
    console.log(this.props.match.params.code);
    let actionCode = this.props.match.params.code
    let res = await ChoosePageApi({
      actionCode,
      testType: this.state.testType
    })
    // this.state.dir = res.data
    // console.log(this.state.dir);
    console.log(res);
    let dir = {
      all: "全部",
      qa: "问答",
      code: "编程",
      fill: "填空",
      one: "单选",
      check: "判断",
      many: "多选"
    }
    this.setState({
      timuArr: res.data.map(item => {
        return { key: dir[item.key], value: item.value, sort: item.sort, title: item.key }
      })
    })
    console.log(dir);
  }
  render() {
    return (
      <div className="choose">
        <div className="top_btns">
          <div className="top_btn1" onClick={() => this.props.history.push({
            pathname: '/practice', state: {
              testNum: this.state.chooSeArrNum[this.state.chOoSeNum],
              testType: this.state.chooSeNum,
              actionCode: this.props.match.params.code,
              questionType: this.state.timuArr[this.state.timuNum].title
            }
          })}>进入练习模式</div>
          <div className="top_btn2" onClick={this.goToExam.bind(this)}>进入考试模式</div>
        </div>
        <div className="mytitle">试题分类</div>
        <ul className="tabs">
          {
            this.state.chooSeArr.map((item, index) =>
              <li key={index} onClick={this.ChooseFn.bind(this, item.key)} className={this.state.chooSeNum === item.key ? 'active' : ''}>{item.en}
              </li>
            )
          }

          {/* <li className={false ? 'active' : ''}>未做</li>
          <li className={false ? 'active' : ''}>已做</li>
          <li className={false ? 'active' : ''}>错误</li> */}
        </ul>
        <div className="mytitle">题目类型</div>
        <ul className="tabs">
          {
            this.state.timuArr.map((item, index) =>
              <li key={index} onClick={this.timuFn.bind(this, index)} className={this.state.timuNum === index ? 'active' : ''}>{item.key}({item.value})</li>
            )
          }
          <li style={{ display: this.state.timuArr.length < 3n ? "flex" : "none", background: "#fff" }}></li>
          {/* <li className={false ? 'active' : ''}>单选题(100)</li>
          <li className={false ? 'active' : ''}>多选题(100)</li>
          <li className={false ? 'active' : ''}>判断题(100)</li>
          <li className={false ? 'active' : ''}>问答题(100)</li>
          <li className={false ? 'active' : ''}>填空题(100)</li> */}
        </ul>
        <div className="mytitle">做题数量</div>
        <ul className="tabs">
          {
            this.state.chooSeArrNum.map((item, index) =>
              <li key={index} onClick={this.ChooseNumFn.bind(this, index)} className={this.state.chOoSeNum === index ? 'active' : ''}>{item}</li>
            )
          }

          {/* <li className={false ? 'active' : ''}>10</li>
          <li className={false ? 'active' : ''}>10</li>
          <li className={false ? 'active' : ''}>10</li>
          <li className={false ? 'active' : ''}>10</li>
          <li className={false ? 'active' : ''}>10</li> */}
        </ul>
        <GoBack />
      </div>
    );
  }
  // 试题分类的点击事件
  ChooseFn(index) {
    // console.log(index);
    this.setState({
      chooSeNum: index
    })
  }
  // 做题数量的点击事件
  ChooseNumFn(index) {
    // console.log(index);
    this.setState({
      chOoSeNum: index
    })
  }
  // 题目类型的点击事件
  timuFn(index) {
    console.log(index);
    this.setState({
      timuNum: index
    })
  }
  goToExam() {
    // 进入考试模式,提示该功能暂未开放
    showYTKAlert(this.props, "warning", "该功能暂未开放")
  }
}
const mapDispatchToProps = dispatch => {
  return {
    ...alertDispatchFn(dispatch)
  }
}

export default connect(null, mapDispatchToProps)(Choose)